<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 创建axios实例并添加请求拦截器
// 配置baseURL为'/api'，这样请求会经过vite的代理转发到后端
const api = axios.create({
  baseURL: '/api'
})

// 请求拦截器 - 添加token认证头
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.token = token
  }
  return config
}, error => {
  return Promise.reject(error)
})

const name = ref('');
const gender = ref('');
const job = ref('');
const userList = ref([]);
const loading = ref(false);

// 职位映射
const jobMap = {
  1: '班主任',
  2: '讲师',
  3: '学工主管',
  4: '教研主管',
  5: '咨询师'
};

// 性别映射
const genderMap = {
  1: '男',
  2: '女'
};

// 表格样式配置
const headerCellStyle = {
  backgroundColor: 'rgba(22, 27, 34, 0.8)',
  color: '#58a6ff',
  fontWeight: '600',
  borderBottom: '1px solid #30363d'
};

const tableRowClassName = ({ row, rowIndex }) => {
  return rowIndex % 2 === 0 ? 'tech-table-row-even' : 'tech-table-row-odd';
};

// 格式化职位
const formatJob = (row) => {
  return jobMap[row.job] || '其他';
};

// 格式化性别
const formatGender = (row) => {
  return genderMap[row.gender] || '其他';
};

//查询
const search = async () => {
  loading.value = true;
  try {
    const result = await api.get(`/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`);
    userList.value = result.data.data;
  } catch (error) {
    ElMessage.error('查询失败，请稍后重试');
    console.error('查询错误:', error);
    // 使用模拟数据作为备选
    if (userList.value.length === 0) {
      userList.value = getMockData();
    }
  } finally {
    loading.value = false;
  }
};

// 模拟数据
const getMockData = () => {
  return [
    { id: 1, name: '张三', image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', gender: 1, job: 2, entrydate: '2023-01-15', updatetime: '2023-12-01' },
    { id: 2, name: '李四', image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', gender: 2, job: 1, entrydate: '2023-02-20', updatetime: '2023-11-15' },
    { id: 3, name: '王五', image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', gender: 1, job: 3, entrydate: '2023-03-10', updatetime: '2023-10-20' },
    { id: 4, name: '赵六', image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', gender: 2, job: 4, entrydate: '2023-04-05', updatetime: '2023-09-10' },
    { id: 5, name: '孙七', image: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png', gender: 1, job: 5, entrydate: '2023-05-18', updatetime: '2023-08-25' }
  ];
};

//清空
const clear = () => {
  name.value = '';
  gender.value = '';
  job.value = '';
  search();
};

//页面加载完毕时执行
onMounted(() => {
  search();
  // 添加页面加载动画效果
  setTimeout(() => {
    document.querySelector('.tech-card').classList.add('visible');
  }, 100);
});
</script>

<template>
  <div class="emp-container">
    <div class="page-header">
      <div class="header-decoration"></div>
      <h2 class="page-title">员工管理</h2>
      <div class="header-glow"></div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-container tech-card">
      <div class="search-form">
        <div class="form-item">
          <label>姓名</label>
          <el-input
            v-model="name"
            placeholder="请输入姓名"
            class="tech-input"
          />
        </div>
        
        <div class="form-item">
          <label>性别</label>
          <el-select
            v-model="gender"
            placeholder="请选择性别"
            class="tech-select"
          >
            <el-option value="" label="全部" />
            <el-option value="1" label="男" />
            <el-option value="2" label="女" />
          </el-select>
        </div>

        <div class="form-item">
          <label>职位</label>
          <el-select
            v-model="job"
            placeholder="请选择职位"
            class="tech-select"
          >
            <el-option value="" label="全部" />
            <el-option value="1" label="班主任" />
            <el-option value="2" label="讲师" />
            <el-option value="3" label="学工主管" />
            <el-option value="4" label="教研主管" />
            <el-option value="5" label="咨询师" />
          </el-select>
        </div>

        <div class="form-actions">
          <el-button
            type="primary"
            @click="search"
            :loading="loading"
            class="tech-btn search-btn"
          >
            <i class="el-icon-search"></i>
            查询
          </el-button>
          <el-button
            @click="clear"
            class="tech-btn clear-btn"
          >
            清空
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 表格区域 -->
    <div class="table-container tech-card">
      <el-table
        v-loading="loading"
        :data="userList"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        :row-class-name="tableRowClassName"
        empty-text="暂无数据"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="image" label="头像" width="100">
          <template #default="scope">
            <div class="avatar-container">
              <img :src="scope.row.image" class="avatar" alt="头像" />
              <div class="avatar-glow"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="80" :formatter="formatGender" />
        <el-table-column prop="job" label="职位" width="120" :formatter="formatJob" />
        <el-table-column prop="entrydate" label="入职时间" width="150" />
        <el-table-column prop="updatetime" label="更新时间" width="150" />
      </el-table>
    </div>
  </div>
</template>

<style scoped>
/* 科技感主题样式 */
.emp-container {
  padding: 20px;
  background: #0d1117;
  min-height: 100%;
}

/* 页面标题区域 */
.page-header {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 15px;
}

.page-title {
  font-size: 24px;
  color: #58a6ff;
  margin: 0;
  position: relative;
  z-index: 2;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

.header-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #58a6ff, transparent);
}

.header-glow {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 150px;
  height: 1px;
  background: #58a6ff;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.5);
}

/* 搜索容器 */
.search-container {
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid #30363d;
  background: rgba(22, 27, 34, 0.8);
  padding: 20px;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out;
  backdrop-filter: blur(10px);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-item label {
  color: #c9d1d9;
  font-weight: 500;
  min-width: 60px;
}

/* 科技感输入框 */
.tech-input,
.tech-select {
  background: rgba(13, 17, 23, 0.7);
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tech-input:hover,
.tech-select:hover {
  border-color: #58a6ff;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.1);
}

.tech-input:focus,
.tech-select:focus {
  border-color: #58a6ff;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.2);
}

/* 按钮样式 */
.form-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.tech-btn {
  border-radius: 8px;
  padding: 8px 20px;
  transition: all 0.3s ease;
  font-weight: 500;
  border: 1px solid transparent;
}

.search-btn {
  background: linear-gradient(90deg, #58a6ff, #1d6fe2);
  border-color: #58a6ff;
  color: white;
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(88, 166, 255, 0.3);
}

.clear-btn {
  background: rgba(139, 148, 158, 0.1);
  border-color: #30363d;
  color: #c9d1d9;
}

.clear-btn:hover {
  background: rgba(139, 148, 158, 0.2);
  border-color: #484f58;
}

/* 表格容器 */
.table-container {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #30363d;
  background: rgba(22, 27, 34, 0.8);
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-out 0.2s;
  backdrop-filter: blur(10px);
}

.tech-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 自定义表格样式 */
:deep(.el-table) {
  background: transparent !important;
  color: #c9d1d9;
}

:deep(.el-table__body-wrapper) {
  background: rgba(13, 17, 23, 0.5);
}

:deep(.el-table__row) {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
}

:deep(.el-table__row:hover) {
  background-color: rgba(88, 166, 255, 0.1) !important;
  transform: translateX(5px);
}

:deep(.el-table__row:last-child) {
  border-bottom: none;
}

.tech-table-row-even {
  background-color: rgba(22, 27, 34, 0.3);
}

.tech-table-row-odd {
  background-color: rgba(22, 27, 34, 0.5);
}

/* 头像样式 */
.avatar-container {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #30363d;
  transition: all 0.3s ease;
}

.avatar-glow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88, 166, 255, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:hover .avatar {
  border-color: #58a6ff;
  transform: scale(1.1);
}

.avatar-container:hover .avatar-glow {
  opacity: 1;
}

/* 滚动条样式 */
:deep(.el-table__body-wrapper::-webkit-scrollbar),
:deep(.el-scrollbar__wrap::-webkit-scrollbar) {
  width: 8px;
  height: 8px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track),
:deep(.el-scrollbar__wrap::-webkit-scrollbar-track) {
  background: rgba(13, 17, 23, 0.5);
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb),
:deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb) {
  background: #30363d;
  border-radius: 4px;
  transition: background 0.3s ease;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover),
:deep(.el-scrollbar__wrap::-webkit-scrollbar-thumb:hover) {
  background: #484f58;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-actions {
    margin-left: 0;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .emp-container {
    padding: 10px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .search-container {
    padding: 15px;
  }
  
  .form-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-item label {
    min-width: auto;
  }
}
</style>